<template>
  <div>
    <van-form @submit="onSubmit">
      <van-field
        v-model="mobile"
        name="mobile"
        label="手机号"
        placeholder="手机号"
        :rules="[{ required: true, message: '请填写手机号'}]"
      />
      <van-field
        v-model="captcha"
        type="text"
        name="captcha"
        label="验证码"
        placeholder="验证码"
        :rules="[{ required: true, message: '请填写验证码' }]"
      >
      </van-field>
      <Captcha style="float: right" ref="cap"></Captcha>
      <van-field
        v-model="sms"
        type="text"
        name="code"
        label="短信验证码"
        placeholder="短信验证码"
        :rules="[{ required: true, message: '请填写短信验证码' }]"
      />
      <van-button type="primary" :disabled="verDisabled" style="float: right" @click="capBtn"
        >{{verDisabled&&sent?`${time}秒后获取`:"获取短信"}}</van-button
      >

      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
// 导入需要的vant组件并注册
import Vue from "vue";
import Captcha from "@/components/tools/Captcha";
import uri from "@/config/uri";
import { Field, Button, Form } from "vant";
import { Toast } from "vant";

Vue.use(Toast);
Vue.use(Button);
Vue.use(Form);
Vue.use(Field);
Vue.use(Button);
export default {
  data() {
    return {
      mobile: "",
      // 短信验证码
      sms: "",
      captcha: "",
      token: "",
      // 是否可以点击获取验证
      verDisabled: false,
      time: 60,
      sent: 0,
      requestId:""
    };
  },

  methods: {
    // 提交表单信息，登录
    onSubmit(values) {
      this.$http.post(uri.smsLogin,{mobile:this.mobile,requestId:this.requestId,code:this.sms}).then((res)=>{
          // console.log(res);
          if(res.errNo==0){
            Toast.success("登录成功");
            this.$router.push("/")
          }else{
            Toast.success("登录失败")
          }
      })
    },
  // 验证码判断
    capBtn() {
      this.$http
        .post(uri.verifyCaptcha, {
          key: this.$store.state.capKey,
          captcha: this.captcha,
        })
        .then((res) => {
          console.log(res);
          if (res.errNo == 0) {
            // 图形验证码输入正确
            // 保存token
            this.token = res.context.token;
            this.$http
              .post(uri.sendSms, {
                token: this.token,
                mobile: this.mobile,
                type: 0,
              })
              .then((ret) => {
                console.log(ret);
                Toast.success("验证码发送成功");
                // 保存requestID
                this.requestId = ret.requestId;
                this.timedown();
                this.sent=1;
              });
          } else {
            // 图形验证码输入错误
            Toast.fail("图形验证码输入错误");
            this.$refs.cap.reload();
          }
        });
    },
    // 倒计时
    timedown(){
      if(this.time==0){
        this.verDisabled=false;
        this.time=60;
      }else{
        this.time--;
        this.verDisabled=true;
        setTimeout(()=>{
          this.timedown()
        },1000)
      }
    }
  },
  components: {
    Captcha,
  },
};
</script>

<style scoped>
.van-button--primary {
  position: relative;
  top: -48px;
  right: 15px;
  border-radius: 30px;
}
.van-button {
  background-color: #4cd970;
  border: 1px solid #4cd970;
  border-radius: 0px;
}
</style>